<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />
	<!--[if lt IE 9]>
	<script type="text/javascript" src="lib/html5.js"></script>
	<script type="text/javascript" src="lib/respond.min.js"></script>
	<![endif]-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--[if IE 6]>
	<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
	<script>DD_belatedPNG.fix('*');</script><![endif]-->
	<!--/meta 作为公共模版分离出去-->

	<title>饼状图 - 系统统计 - h-ui.admin.pro v1.0</title>
	<meta name="keywords" content="h-ui.admin.pro v1.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
	<meta name="description" content="h-ui.admin.pro v1.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<body>
	<div class="wap-container">
		<nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
			首页
			<span class="c-gray en">/</span>
			系统统计
			<span class="c-gray en">/</span>
			饼状图
			<a class="btn btn-success radius f-r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
		</nav>
		<article class="Hui-admin-content clearfix">
			<div class="panel">
				<div class="panel-body">
					<div class="row clearfix">
						<div class="col-xs-12">
							<div class="panel">
								<div class="panel-header">
									会员概况
								</div>
								<div class="panel-body">
									<div class="row">
										<div class="col-sm-12 Hui-admin-datatime-tag" style="text-align:right;padding-bottom: 20px;">
											<span class="active">今天</span>
											<span>3天</span>
											<span>7天</span>
											<span>30天</span>
											<span>90天</span>
											<span>半年</span>
											<span>1年</span>
											<span>全部</span>
											<span>自定义</span>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-3">
											<div id="echarts-1-1" style="height:170px"></div>
											<div class="text-c f-14 c-666">项目1</div>
										</div>
										<div class="col-sm-3">
											<div id="echarts-1-2" style="height:170px"></div>
											<div class="text-c f-14 c-666">项目2</div>
										</div>
										<div class="col-sm-3">
											<div id="echarts-1-3" style="height:170px"></div>
											<div class="text-c f-14 c-666">项目3</div>
										</div>
										<div class="col-sm-3">
											<div id="echarts-1-4" style="height:170px"></div>
											<div class="text-c f-14 c-666">项目4</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row clearfix mt-20">
						<div class="col-xs-6">
							<div class="panel">
								<div class="panel-header">
									手机号统计
								</div>
								<div class="panel-body">
									<div id="charts-1" style="height:300px"></div>
								</div>
							</div>
						</div>
						<div class="col-xs-6">
							<div class="panel">
								<div class="panel-header">
									性别完善情况
								</div>
								<div class="panel-body">
									<div id="charts-2" style="height:300px"></div>
								</div>
							</div>
						</div>
					</div>

					<div class="row clearfix mt-20">
						<div class="col-xs-6">
							<div class="panel">
								<div class="panel-header">
									生肖分布统计
								</div>
								<div class="panel-body">
									<div id="charts-3" style="height:300px"></div>
								</div>
							</div>
						</div>
						<div class="col-xs-6">
							<div class="panel">
								<div class="panel-header">
									性别统计
								</div>
								<div class="panel-body">
									<div id="charts-4" style="height:300px"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<article>
	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
	<!--/_footer 作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/echarts/4.1.0.rc2/echarts.min.js"></script>
	<script type="text/javascript">
	$(function () {
		// 占比
		var echarts1_1 = echarts.init(document.getElementById('echarts-1-1'));
    var echarts1_1_option = {
      title: {
        text: '70%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#333',
          fontSize: 30
        }
      },
      color: ['#1890ff', '#eeeeee'],
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)",
      },
      label: {
        show: false,
      },
      series: [
        {
          type:'pie',
          radius: ['65%', '80%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
          },
          data:[
            {value:70, name:'完成'},
            {value:30, name:'未完成'}
          ]
        }
      ],
    };
    echarts1_1.setOption(echarts1_1_option);


    var echarts1_2 = echarts.init(document.getElementById('echarts-1-2'));
    var echarts1_2_option = {
      title: {
        text: '65%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#333',
          fontSize: 30
        }
      },
      color: ['#e87b78', '#eeeeee'],
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)",
      },
      label: {
        show: false,
      },
      series: [
        {
          type:'pie',
          radius: ['65%', '80%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
          },
          data:[
            {value:65, name:'完成'},
            {value:35, name:'未完成'}
          ]
        }
      ],
    };
    echarts1_2.setOption(echarts1_2_option);

    var echarts1_3 = echarts.init(document.getElementById('echarts-1-3'));
    var echarts1_3_option = {
      title: {
        text: '80%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#333',
          fontSize: 30
        }
      },
      color: ['#61be67', '#eeeeee'],
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)",
      },
      label: {
        show: false,
      },
      series: [
        {
          type:'pie',
          radius: ['65%', '80%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
          },
          data:[
            {value:80, name:'完成'},
            {value:20, name:'未完成'}
          ]
        }
      ],
    };
    echarts1_3.setOption(echarts1_3_option);

    var echarts1_4 = echarts.init(document.getElementById('echarts-1-4'));
    var echarts1_4_option = {
      title: {
        text: '55%',
        x: 'center',
        y: 'center',
        textStyle: {
          fontWeight: 'normal',
          color: '#333',
          fontSize: 30
        }
      },
      color: ['#4da7fd', '#eeeeee'],
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)",
      },
      label: {
        show: false,
      },
      series: [
        {
          type:'pie',
          radius: ['65%', '80%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            show: false,
          },
          data:[
            {value:55, name:'完成'},
            {value:45, name:'未完成'}
          ]
        }
      ],
    };
    echarts1_4.setOption(echarts1_4_option);

		// 饼状1
    var echarts1 = echarts.init(document.getElementById('charts-1'));
    var echarts1_option = {
      title : {
        text: '总数',
        subtext: '37568',
        x:'center',
        textStyle: {
          fontSize: 18,
        },
        subtextStyle: {
          color: '#595959',
          fontSize: 16,
        }
      },
      tooltip : {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
      },
      label: {
        show: true,
        formatter: function(param) {
          return param.name + '\n' + param.value + ',  ' + Math.round(param.percent) + '%';
        }
      },
      legend: {
        x : 'center',
        y : 'bottom',
        data:['有效手机号','错误手机号','手机号信息为空']
      },
      series : [
        {
          name:'手机号质量',
          type: 'pie',
          radius : '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          color: ['#1890ff', '#df5667', '#888888'],
          data:[
            {
              value: 1000,
              name: '有效手机号',
            },
            {
              value: 520,
              name: '错误手机号',
            },
            {
              value: 460,
              name: '手机号信息为空',
            }
          ]
        }
      ]
    }
    echarts1.setOption(echarts1_option);


		// 饼状2
		var echarts2 = echarts.init(document.getElementById('charts-2'));
    var echarts2_option = {
      title : {
        text: '',
				x:'center',
				y: 'center',
        textStyle: {
          fontSize: 30,
        }
      },
      color: ['#1890ff', '#eeeeee'],
      tooltip: {
        show: false,
      },
			legend: {
        x : 'center',
        y : 'bottom',
        data:['已完善','未完善']
      },
      series: [
        {
          type:'pie',
          radius: ['60%', '70%'],
          labelLine: {
            show: false,
          },
          avoidLabelOverlap: false,
          hoverAnimation: false,
          data:[
            {
              value: 70,
							name: '已完善',
              label: {
                position: 'center',
                formatter: "{b} {d}%",
								fontSize: 18,
              },
            },
            {
              value: 30,
							name: '未完善',
              label: {
                show:false,
              }
            },
          ]
        }
      ]
    }
    echarts2.setOption(echarts2_option);

		// 星座分布统计 - 生肖
    var echarts3 = echarts.init(document.getElementById('charts-3'));
    var echarts3_option = {
      title : {
        text: '',
        textStyle: {
          fontSize: 18,
        }
      },
      color: ['#1890ff'],
      tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)"
      },
      series: [
        {
          type:'pie',
          roseType: 'area',
          radius: ['0%', '70%'],
          label: {
            show: false,
          },
          itemStyle: {
            color: 'white',
            borderColor: '#1890ff'
          },
          avoidLabelOverlap: false,
          data:[
            {
              name: '鼠',
              value: 8,
            },
            {
              name: '牛',
              value: 8,
            },
            {
              name: '虎',
              value: 8,
            },
            {
              name: '兔',
              value: 9,
            },
            {
              name: '龙',
              value: 7,
            },
            {
              name: '蛇',
              value: 5,
            },
            {
              name: '马',
              value: 22,
            },
            {
              name: '羊',
              value: 8,
            },
            {
              name: '猴',
              value: 12,
            },
            {
              name: '鸡',
              value: 16,
            },
            {
              name: '狗',
              value: 14,
            },
            {
              name: '猪',
              value: 23,
            },
          ]
        },
        {
          type: 'pie',
          hoverOffset: 0,
          data: [
            {
              value: 1,
              name: '鼠',
            },
            {
              value: 1,
              name: '牛',
            },
            {
              value: 1,
              name: '虎',
            },
            {
              value: 1,
              name: '兔',
            },
            {
              value: 1,
              name: '龙',
            },
            {
              value: 1,
              name: '蛇',
            },
            {
              value: 1,
              name: '马',
            },
            {
              value: 1,
              name: '羊',
            },
            {
              value: 1,
              name: '猴',
            },
            {
              value: 1,
              name: '鸡',
            },
            {
              value: 1,
              name: '狗',
            },
            {
              value: 1,
              name: '猪',
            }
          ],
          radius: ['70%', '90%'],
          zlevel: -2,
          itemStyle: {
            borderColor: 'white',
          },
          markArea: {
            markArea: false
          },
          emphasis: {
            itemStyle: {
              color: ['#2593f9'],
            }
          },
          label: {
            show: true,
            position: 'inside',
          }
        }
      ]
    }
    echarts3.setOption(echarts3_option);

		// 饼状1
    var echarts4 = echarts.init(document.getElementById('charts-4'));
    var echarts4_option = {
      title : {
        text: '总数',
        subtext: '37568',
        x:'center',
        textStyle: {
          fontSize: 18,
        },
        subtextStyle: {
          color: '#595959',
          fontSize: 16,
        }
      },
      tooltip : {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
      },
      label: {
        show: true,
        formatter: function(param) {
          return param.name + '\n' + param.value + ',  ' + Math.round(param.percent) + '%';
        }
      },
      legend: {
        x : 'center',
        y : 'bottom',
        data:['男','女','']
      },
      series : [
        {
          name:'男',
          type: 'pie',
          radius : '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          color: ['#1890ff', '#e87b78'],
          data:[
            {
              value: 1000,
              name: '男',
            },
            {
              value: 520,
              name: '女',
            },
          ]
        }
      ]
    }
    echarts4.setOption(echarts4_option);
	});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
